<template>
  <div class="patientList-container">
    <page-header
      type="patientList"
      @reset="resetSeach"
      @searchChange="searchData"
    >
      <template #default>
        <span class="title">门诊号</span>
        <el-input
          class="search-input"
          placeholder="门诊号"
          v-model="pageData.search.outpatientNo"
          clearable
        />
      </template>
    </page-header>
    <pagination-table
      ref="ptable"
      :tableData="pageData.listData"
      @pagination="paginaChange"
    >
      <el-table-column
        label="序号"
        type="index"
        width="80"
        :index="indexMethod"
      ></el-table-column>
      <XMTableColumn label="姓名" prop="name"></XMTableColumn>
      <XMTableColumn label="病案号" prop="ptNo"></XMTableColumn>
      <XMTableColumn label="性别" prop="sexTitle">
        <!-- <template #default="scope"> -->
        <!-- {{ scope.row.sex === 1 ? '男' : '女' }} -->
        <!-- </template> -->
        <template #default="scope">
          {{ scope.row.sex ? '男' : '女' }}
        </template>
      </XMTableColumn>
      <XMTableColumn label="年龄" prop="ageName"></XMTableColumn>
      <XMTableColumn label="手机号" prop="phone"></XMTableColumn>
      <XMTableColumn label="诊断" prop="diagnosis"></XMTableColumn>
      <XMTableColumn
        label="登记时间"
        sortable="custom"
        prop="createTime"
      ></XMTableColumn>
      <XMTableColumn label="操作" min-width="200">
        <template #default="scope">
          <el-button size="small" type="danger" @click="reception(scope.row)">
            接诊
          </el-button>
          <el-button size="small" type="primary" @click="edit(scope.row)">
            查看
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </XMTableColumn>
    </pagination-table>
    <add-patient
      ref="addRef"
      title="接诊患者"
      @success="addSucess"
    ></add-patient>
  </div>
</template>

<script>
  import PageHeader from '@/components/PageHeader'
  import PaginationTable from '@/components/PaginationTable'
  import { reactive, onActivated, ref } from 'vue'
import { patients, deletePatient } from '@/api/modules/patient.js'
import moment from 'moment'
import { useRouter } from 'vue-router'
import AddPatient from '@/components/AddPatient'
import { ElMessage, ElMessageBox } from 'element-plus'
  export default {
    name: 'patientList',
    components: { PageHeader, PaginationTable, AddPatient },
    setup() {
      const pageData = reactive({
        listData: {},
        search: { pageIndex: 1, pageSize: 5, orderType: 1, outpatientNo: '' },
      })

      // 序号计算方法
      const indexMethod = (index) => {
        const currentPage = pageData.search.pageIndex
        const pageSize = pageData.search.pageSize
        return (currentPage - 1) * pageSize + index + 1
      }

      const loadData = async function (params) {
        const res = await patients(params)
        pageData.listData = res
      }

      // 事件处理
      const ptable = ref(null)
      const resetSeach = function () {
        pageData.search = { pageIndex: 1, pageSize: 5, orderType: 1 }
        loadData(pageData.search)
        ptable.value.clearData()
      }
      const searchData = function (params) {
        pageData.search.name = params.value1
        pageData.search.startDay = params.value2.start
          ? moment(params.value2.start).format('YYYY-MM-DD')
          : null
        pageData.search.endDay = params.value2.end
          ? moment(params.value2.end).format('YYYY-MM-DD')
          : null
        pageData.search.status = params.value3
        pageData.search.ptNo = params.value4
        loadData(pageData.search)
      }
      const paginaChange = function (params) {
        pageData.search.pageIndex = params.current
        pageData.search.pageSize = params.pageSize
        pageData.search.orderType = params.orderType
        loadData(pageData.search)
      }

      const router = useRouter()
      const edit = function (params) {
        router.push({ name: 'patientInfo', query: { id: params.id } })
      }
      const addRef = ref(null)
      const reception = function (params) {
        // 快速接诊固定传2
        addRef.value.init({ id: params.id, quickReceptionType: 2 })
      }
      // 删除患者
      const handleDelete = async (row) => {
        try {
          await ElMessageBox.confirm(
            `确定要删除患者 ${row.name} 吗？`,
            '警告',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )

          // 调用删除接口
          await deletePatient(row.id)
          ElMessage.success('删除成功')

          // 重新加载数据
          await loadData(pageData.search)
        } catch (error) {
          if (error === 'cancel') {
            ElMessage.info('已取消删除')
          } else {
            ElMessage.error('删除失败：' + (error.message || '未知错误'))
          }
        }
      }

      onActivated(() => {
        loadData(pageData.search)
      })

      // 新增接诊患者
      const addSucess = function (data) {
        router.push({
          name: 'medicalRecord',
          query: { id: data.pid, vid: data.res.data },
        })
      }
      return {
        pageData,
        resetSeach,
        searchData,
        paginaChange,
        edit,
        reception,
        addRef,
        addSucess,
        ptable,
        indexMethod,
        handleDelete,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .patientList-container {
    margin: 32px;
    background-color: white;
    .title {
      margin-right: 10px;
      white-space: nowrap;
      width: 42px;
    }
    .search-input {
      width: 75% !important;
    }
  }
</style>
